<template>
  <div>
    <comopnent :is="headType" :title="title" :buttonEventHandle="buttonEventHandle" :button="button" />
  </div>
</template>

<script>
/*
  head位置保持不变, 路由刷新, 改变header的头类型, 所以使用动态组件, 将route的信息存方法到meta中, 给header的组件传递下去渲染
*/ 
import MNavbar from '@/components/m/MNavbar'
import MSearchbar from '@/components/m/MSearchbar'
export default {
  name: "VueEleMHeader",
  components: {
    MNavbar, MSearchbar
  },
  data() {
    return {
      headType: 'MSearchbar',
      title: '默认标题',
      button: '',
      buttonEventHandle: '',
    };
  },

  mounted() {
  },
  watch: {
    $route(to) {
      this.button = '',
      this.buttonEventHandle = ''
      Object.assign(this, to.meta)
    }
  },
  methods: {
    onSearch() {
      console.log('搜索')
    }
  },
};
</script>
<style lang="stylus" 
>

</style>